<template>
  <div class="login-container">
    <el-card class="login-card" shadow="hover">
      <div class="login-header">
        <OfficeBuilding class="login-logo" />
        <h1 class="login-title">HIS云医院</h1>
        <p class="login-subtitle">管理系统</p>
      </div>
      <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginFormRef"
          label-width="0"
          class="login-form"
      >
        <el-form-item prop="username">
          <el-input
              v-model="loginForm.username"
              placeholder="用户名"
              autocomplete="off"
              clearable
              class="login-input"
          >
            <template #prefix>
              <User class="input-icon" />
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              :type="showPassword ? 'text' : 'password'"
              placeholder="密码"
              autocomplete="off"
              clearable
              class="login-input"
          >
            <template #prefix>
              <Lock class="input-icon" />
            </template>
            <template #suffix>
              <component
                  :is="showPassword ? View : Hide"
                  class="input-icon-suffix"
                  @click="togglePassword"
              />
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              class="login-button"
              @click="onLogin"
              :loading="loading"
              block
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useCounterStore } from '@/stores/counter'
import { User, Lock, View, Hide, OfficeBuilding } from '@element-plus/icons-vue'

const router = useRouter()
const counterStore = useCounterStore()

const loading = ref(false)
const showPassword = ref(false)

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const loginFormRef = ref(null)

function togglePassword() {
  showPassword.value = !showPassword.value
}

async function onLogin() {
  // 先校验表单
  await loginFormRef.value.validate(async valid => {
    if (!valid) return

    loading.value = true
    try {
      // 调用后端登录接口
      const { data } = await axios.post('/api/master/user/login', loginForm)

      // 1) 保存 token
      localStorage.setItem('token', data.token)

      // 2) 把 userId/useType/username 存到 Pinia
      counterStore.setUser({
        userId:   data.userId,
        useType:  data.useType,
        username: data.username
      })

      ElMessage.success('登录成功')
       const homeMap = {
             0: '/',             // 超级管理员：根路径，显示所有模块
             1: '/master',       // 系统管理员：只看 master
             2: '/registry',     // 挂号收费员：只看 registry
             3: '/doctor',       // 门诊医生：只看 doctor
             4: '/lab'           // 检验医生：只看 lab
       }
       const home = homeMap[data.useType] || '/'
       router.push(home)
      // 3) 跳转到根布局，触发路由守卫动态挂载侧边栏

    } catch (e) {
      ElMessage.error(e.response?.data?.message || '登录失败')
    } finally {
      loading.value = false
    }
  })
}
</script>

<style scoped>
@keyframes gradientShift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@keyframes shine {
  0%   { transform: skewX(-20deg) translateX(-100%); }
  100% { transform: skewX(-20deg) translateX(100%); }
}

.login-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(270deg, slateblue, #66b1ff, navajowhite, #409eff);
  background-size: 800% 800%;
  animation: gradientShift 20s ease infinite;
  overflow: hidden;
}
.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.2) 50%,
      transparent 100%
  );
  transform: skewX(-20deg) translateX(-100%);
  animation: shine 3s linear infinite;
  pointer-events: none;
}
.login-card {
  position: relative;
  z-index: 1;
  width: 420px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 50px 30px;
  background: #fff;
}
.login-header {
  text-align: center;
  margin-bottom: 40px;
}
.login-logo {
  font-size: 52px;
  color: #409eff;
  margin-bottom: 16px;
}
.login-title {
  font-size: 26px;
  font-weight: bold;
  margin: 0;
  color: #303133;
}
.login-subtitle {
  font-size: 16px;
  color: #909399;
  margin: 8px 0 0;
}
.login-form {
  width: 100%;
}
.login-input {
  height: 44px;
}
.input-icon {
  font-size: 18px;
  color: #909399;
  margin: 0 8px;
}
.input-icon-suffix {
  font-size: 18px;
  color: #909399;
  cursor: pointer;
}
.login-button {
  width: 100%;
  font-size: 18px;
  padding: 12px 0;
  border-radius: 6px;
}
</style>
